<template>
  <div class="container">
    <!-- 弹出层 -->
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      @close="handleClose"
    >
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【题型】：{{ tranFn(form.questionType) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【编号】：{{ form.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【难度】：{{ transFn(form.difficulty) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【标签】：{{ form.tags }}
          </div></el-col
        >
      </el-row>
      <el-row style="margin-top: 20px; margin-bottom: 20px">
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【学科】：{{ form.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【目录】：{{ form.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            【方向】：{{ form.direction }}
          </div></el-col
        >
      </el-row>
      <!-- 分割线 -->
      <hr />
      <el-row>
        <el-col :span="24"
          ><div
            class="grid-content bg-purple-dark"
            style="margin-top: 10px; margin-bottom: 10px"
          >
            【题干】：
          </div>
          <div v-html="form.question"></div>
          <p style="width: 400px" v-if="form.questionType !== '3'">
            {{ tranFn(form.questionType) }}题 选项：（以下选中的选项为正确答案）
          </p>

          <el-radio-group v-if="form.questionType === '1'" :value="radio">
            <el-radio
              style="margin-bottom: 10px; display: block"
              :label="item.isRight"
              v-for="item in form.options"
              :key="item.id"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
          <el-checkbox-group v-if="form.questionType === '2'" :value="checkbox">
            <el-checkbox
              style="margin-bottom: 10px; display: block"
              :label="item.isRight"
              v-for="item in form.options"
              :key="item.id"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24" style="display: flex">
          <div class="grid-content bg-purple-dark" style="margin-top: 10px">
            【参考答案】：
          </div>
          <el-button type="danger" size="small" @click="show = !show"
            >视频答案预览</el-button
          ></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12" style="display: flex">
          <div v-if="show">
            <video
              controls
              style="width: 100%; margin-top: 25px"
              autoplay
              :src="form.videoURL"
            ></video></div
        ></el-col>
      </el-row>

      <hr />
      <el-row>
        <el-col :span="24" style="display: flex">
          <div
            class="grid-content bg-purple-dark"
            style="margin-top: 14px; margin-bottom: 10px"
          >
            【答案解析】：
          </div>
          <span v-html="form.answer"></span>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24" style="display: flex"
          ><div
            class="grid-content bg-purple-dark"
            style="margin-top: 10px; margin-bottom: 10px"
          >
            【题目备注】：{{ form.remarks }}
          </div>
        </el-col>
      </el-row>
      <div
        class="grid-content bg-purple-dark boxright"
        style="margin-top: 30px"
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose" type="primary">关 闭</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入试题类型  难度  方向
import { questionType, difficulty } from '@/api/hmmm/constants'

export default {
  props: {
    dialogVisible: {
      // 控制弹出层显示隐藏
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      questionTypelist: questionType,
      difficultylist: difficulty,
      radio: 1, // 单选框
      checkbox: [1], // 多选框
      show: false // 视频
    }
  },
  methods: {
    // 关闭弹出层前的回调
    handleClose () {
      // 通知父组件关闭弹出层
      this.$emit('update:dialogVisible', false)

      // 关闭视频
      this.show = false
    },
    // 题型方法
    tranFn (id) {
      if (!id) return

      const target = this.questionTypelist.filter((item) => {
        return item.value === +id
      })

      return target[0].label
    },
    // 难度方法
    transFn (id) {
      if (!id) return
      const target = this.difficultylist.filter((item) => {
        return item.value === +id
      })

      return target[0].label
    }
  }
}
</script>

<style scoped >
.boxright {
  display: flex;
  justify-content: flex-end;
}
</style>
